<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">会员包</block>
		</cu-custom>
		<view>
			<view class="cu-list">
				<view class="cu-item bg-white margin-lr-sm radius margin-top-sm space-between">
					<view class="w100 padding-sm text-left">
						<view class="text-lg text-black margin-top">{{list.title}}</view>
						<view class="text-gray margin-tb-sm">
							
						</view>
						<view class="text-gray">
							
						</view>
					</view>
					<view class="console-control padding-sm text-center" :class="'bg-'+theme">
						<view class="text-white">
							<block >
								<text class="text-xxxl ">{{list.money}}</text>
							</block>
							
						</view>
						<view class="text-white text-sm margin-top-xs"></view>
						<view class="cu-btn sm bg-white round  margin-top-sm" @tap="goCreate" v-if="list.state==1">立即领取</view>
					</view>
				</view>
			</view>
			<view class="cu-modal" :class="shareimg==''?'':'show'">
				<view class="cu-dialog show-none"  v-if="shareimg">
					<view class="cu-bar  justify-end">
						<view class="action" bindtap="couponhideModal">
							<text class="cuIcon-close text-red" @click="couponhideModal"></text> 
						</view>
					</view>
					<view>
						<view class="my-data-box">
							<view class="my-data-box-content-inputbox">
								<view class="input-line">
									
									<input class="input-mobile" type="number" placeholder="请输入接收人的电话" v-model="formData.mobile" placeholder-class="my-input-holder"/>
								</view>
							</view>
						</view>
						
						<view class="my-data-box-submitbox" v-if="list.state==1">
							<view class="my-data-box-content-submitbox">
								<button @tap="showConf">确认领取</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		components: {
			
		},
		data() {
			return {
				theme: this.$config.THEME(),
				scrollLeft: 0,
				hasMore:true,
				loading:false,
				list:[],
				coupon_id:0,
				shareimg:"",
				formData:{
					mobile:'',
				},
			};
		},
		filters: {},
		onLoad(options) {
			this.coupon_id=options.coupon_id
			this.getIndex(this.coupon_id)
		},
		methods: {
			showConf(){
				let formData = this.formData
				if(this.list.state==2){
					this.$common.showError('已领取了')
					return
				}
				if (!formData.mobile.trim()) {
					this.$common.showError('请填写手机号码')
					return
				}
				if (!(/^1(2|3|4|5|6|7|8|9)\d{9}$/.test(formData.mobile))) {
					this.$common.showError('请输入正确的手机号')
					return
				}
				this.$http
					.post('coupon_confirm', {coupon_id: this.coupon_id,mobile:formData.mobile})
					.then((response) => {
							if(response.data.code==200){
								this.$common.showSuccess('领取成功',(r)=>{
									uni.navigateTo({
										url:'/pages/member/index'
									})
								})
							}else{
								this.$common.showError('领取失败')
							}				
					})
					.catch((response) => {
						this.$common.showError(response.data.message)
						console.log(response)
					})
			},
			goCreate(){
				this.shareimg=1
			},
			couponhideModal()
			{
				this.shareimg=""
			},
			getIndex(coupon_id) {
				
				if (this.hasMore && !this.loading) {
					this.loading = true
					this.$http
							.get('member_coupon_apply', {
								coupon_id: coupon_id,
							})
							.then((response) => {
								this.list = response.data.data
								console.log(this.list)
								this.loading = false
								uni.stopPullDownRefresh()
							})
							.catch((response) => {
								this.loading = false
								uni.stopPullDownRefresh()
							})
					
				} else
					uni.stopPullDownRefresh()
			},
		},
		onPullDownRefresh() {
			this.getIndex(this.coupon_id)
		},
	}
</script>

<style>
	.console-control {
		min-width: 200rpx;
		border-radius: 18upx 0 0 18upx;
	}

	.text-xxxl {
		font-size: 40rpx;
	}

	.opacity {
		opacity: 0.5;
	}

	.useimg {
		width: 80rpx;
		height: 80rpx;
	}
</style>
